<template>
  <div class="content-container eheadmesg">
    <m-Head v-if="!ok"></m-Head>
    <div class="page-option auto-center" v-if="pagedata">
      <div class="data-title">
        <span class="data-title-text">震中海拔</span>
      </div>
      <div class="data-title-content">
        <div class="data-option">
          <h2>{{pagedata.option}}</h2>
          <span class="data-int">米</span>
        </div>
        <div class="data-icon">
          <div class="data-icon-wrapper">
            <img :src="pageicon">
          </div>
        </div>
      </div>
    </div>
    <div class="page-chart-wrapper" v-if="pagedata">
      <chart :option="chartoption" :id="'envirchart'"></chart>
    </div>
    <div class="page-description auto-center" v-if="desc">
      <p class="page-description-content">{{desc}}</p>
    </div>
  </div>
</template>

<script>
import pageicon from '@/assets/imgicon/enviricon.png'
import mHead from '@/components/head'
import axios from '@/assets/api/axios'
import chart from '@/components/chart'
import ChartoOption from '@/assets/api/chart'
export default {
  name: 'economicinfo',
  props: {
    ok: Boolean
  },
  data: function () {
    return {
      //由于vueg的嵌套路由默认不启动转场动画，需要在其匹配组件中设置为启用
      vuegConfig:{
        disable:false
      },
      pagedata: null,
      desc: null,
      pageicon: pageicon,
      chartoption: null
    }
  },
  created: function () {
    this.getEnvData();
    console.log(this.ok)
  },
  methods: {
    getEnvData () {
      var setting = {
        method: 'POST',
        url: '/EarthData/getData'
      },
      data = {
        city: '定兴县',
        handel: 'envir'
      };
      axios((res) => {
        if (res.stutas === 200) {
          let data = res.data[0];
          this.pagedata = this.setPeoData(data);
          // this.desc = data.topographic;
          this.desc = this.setDesData(data);
          this.setOption();
        }
      }, {setting, data});
    },
    setDesData (data) {
      let des = data.topographic;
      let period = "。";
      if(des.charAt(des.length-1) != "。") {
        return [des,period].join('');
      }else {
        return des;
      }
    },
    setPeoData (data) {
      return {
            option: parseInt(data.altitudeCenter) || parseInt(data.altitudeAverage),
            chart: {
              list: [parseInt(data.altitudeL), parseInt(data.altitudeAverage), parseInt(data.altitudeH)]
            }
          };
    },
    setOption () {
      let data = this.pagedata.chart.list;
      let Chart = new ChartoOption('ShadowBar', data, 'envirchart');
      this.chartoption = Chart.getsoption();
    }
  },
  components: {
    mHead,
    chart
  }
}
</script>

<style>
.eheadmesg::before {
    font-size: 24px;
    height: 22px;
    padding-top: 5px;
    line-height: 17px;
    font-weight: bold;
    text-align: center;
    content: '环境信息';
    position: absolute;
}
</style>